<template>
  <div id="app" :style="'height:'+fullHeight+'px;'">
    <!--登入动画-->
    <!-- <transition name="rotate-fall"> -->
    <router-view  class="app-router-view"></router-view>
    <!-- </transition> -->
  </div>
</template>

<script>
import 'vue-transition.css'
export default {
  name: 'App',
  data () {
			return {
				fullHeight: document.documentElement.clientHeight
			}
		},
		watch: {
			fullHeight (val) {//监控浏览器高度变化
				if(!this.timer) {
					this.fullHeight = val
					this.timer = true
					let that = this
					setTimeout(function (){
						that.timer = false
					},400)
				}
				
			}
		},
		mounted () {
			this.get_bodyHeight()
		},
		methods :{
			get_bodyHeight () {//动态获取浏览器高度
				const that = this
				window.onresize = () => {
					return (() => {
						window.fullHeight = document.documentElement.clientHeight
						that.fullHeight = window.fullHeight
					})()
				}
			}
		}
}

</script>
<style>
  .app .app-router-view {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    overflow: hidden;
    backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
    transform-style: preserve-3d;
    visibility: visible;
  }
</style>
